---
// 该组件的作用：根据标签动态筛选博客列表。
// 在浏览器的url末尾输入tag，比如 `http://localhost:4321/tags/astro`、`http://localhost:4321/tags/successes`。
// 注意：如果需要构建页面路由的信息，请将其编写在 getStaticPaths() 内部。
// 注意：要在页面路由的 HTML 模板中接收信息，请将其编写在 getStaticPaths() 外部。

import BaseLayout from '../../layouts/BaseLayout.astro';

// 返回路由列表（包含用于筛选的所有tag）
// `getStaticPaths` 是动态路由的必须函数（其他名称都不行）。
export async function getStaticPaths() {
  const allPosts = Object.values(import.meta.glob('../posts/*.md', { eager: true }));
  // 静态标签列表
  // `params`用于声明路由参数，`props`用于携带其他数据
  // return [
  //   {params: {tag: "astro"}, props: {posts: allPosts}},
  //   {params: {tag: "successes"}, props: {posts: allPosts}},
  //   {params: {tag: "community"}, props: {posts: allPosts}},
  //   {params: {tag: "blogging"}, props: {posts: allPosts}},
  //   {params: {tag: "setbacks"}, props: {posts: allPosts}},
  //   {params: {tag: "learning in public"}, props: {posts: allPosts}},
  // ];

  // 动态生成标签列表，根据已有的markdown文件。
  // 获取已有标签
  const uniqueTags = [...new Set(allPosts.map((post: any) => post.frontmatter.tags).flat())];
  return uniqueTags.map((tag) => {
    // 根据标签过滤markdown
    const filteredPosts = allPosts.filter((post: any) => post.frontmatter.tags.includes(tag));
    return {
      // `params`用于声明路由参数，`props`用于携带其他数据
      params: { tag },
      props: { posts: filteredPosts },
    };
  });
}

// HTML模板所需的params和props，由上文的getStaticPaths定义。
const { tag } = Astro.params
const { posts } = Astro.props
// const filteredPosts = posts.filter((post: any) => post.frontmatter.tags?.includes(tag))// 根据标签过滤markdown
---
<BaseLayout pageTitle={tag}>
  <p>包含「{tag}」标签的文章</p>
  <ul>
    <!-- {filteredPosts.map((post: any) => <li><a href={post.url}>{post.frontmatter.title}</a></li>)} -->
    {posts.map((post: any) => <li><a href={post.url}>{post.frontmatter.title}</a></li>)}
  </ul>
</BaseLayout>